<template>
  <div class="home-layout">
    <!-- Sidebar -->
    <div :class="['sidebar', { collapsed: isSidebarCollapsed }]">
      <div class="sidebar-header">
        <h2 v-if="!isSidebarCollapsed">管理系统</h2>
        <el-button
            class="toggle-button"
            @click="toggleSidebar"
            :icon="isSidebarCollapsed ? 'Expand' : 'Fold'"
            circle
        />
      </div>
      <el-menu
          :default-active="activeMenu"
          :collapse="isSidebarCollapsed"
          @select="handleMenuSelect"
          router
      >
        <!-- 修改: 使用递归方式渲染菜单项，支持子菜单 -->
        <template v-for="item in menuItems" :key="item.index">
          <el-menu-item
              v-if="!item.children || item.children.length === 0"
              :index="item.index"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <template #title>{{ item.title }}</template>
          </el-menu-item>

          <el-sub-menu
              v-else
              :index="item.index"
          >
            <template #title>
              <el-icon><component :is="item.icon" /></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
                v-for="child in item.children"
                :key="child.index"
                :index="child.index"
            >
              <el-icon><component :is="child.icon" /></el-icon>
              <template #title>{{ child.title }}</template>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Tabs -->
      <div class="tabs-container">
        <el-tabs
            v-model="activeTab"
            type="card"
            closable
            @tab-remove="removeTab"
            @tab-click="handleTabClick"
        >
          <el-tab-pane
              v-for="tab in openedTabs"
              :key="tab.name"
              :label="tab.title"
              :name="tab.name">
          </el-tab-pane>
        </el-tabs>
        <div class="tab-content">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { HomeFilled, Document, Setting, User, Memo,Folder,Unlock,Avatar, Files, Edit, InfoFilled } from '@element-plus/icons-vue'
import { useRoute,useRouter } from 'vue-router'

// State
const route = useRoute()
const router = useRouter()
const isSidebarCollapsed = ref(false)
const activeMenu = ref('home')
const activeTab = ref('home')
const openedTabs = ref([
  {
    name: 'welcome',
    title: '首页',
    component: 'div' // Placeholder component
  }
])

// 修改: 创建包含子菜单的菜单数据结构
const menuItems = reactive([
  {
    index: 'welcome',
    title: '首页',
    icon: HomeFilled
  },
  {
    index: 'settings',
    title: '系统管理',
    icon: Setting,
    children: [
      { index: 'permission', title: '权限管理', icon: Unlock },
      { index: 'role', title: '角色管理', icon: Avatar },
      { index: 'user', title: '用户管理', icon: User },
      { index: 'dict', title: '字典管理', icon: Memo },
      { index: 'logs', title: '日志管理', icon: Document }
    ]
  },
  {
    index: 'base-data',
    title: '基础数据',
    icon: Folder,
    children: [
      { index: 'workshop', title: '车间管理', icon: Folder },
      { index: 'workstation', title: '工作站管理', icon: Folder },
      { index: 'material-category', title: '物料分类', icon: Folder },
      { index: 'material', title: '物料管理', icon: Folder },
      { index: 'unit', title: '计量单位', icon: Folder },
      { index: 'supplier', title: '供应商管理', icon: Folder },
      { index: 'customer', title: '客户管理', icon: Folder }
    ]
  },
  {
    index: 'pro',
    title: '生产管理',
    icon: Folder,
    children: [
      { index: 'process', title: '工序管理', icon: Folder },
      { index: 'proroute', title: '工艺管理', icon: Folder },
      { index: 'production-order', title: '生产工单', icon: Folder },
      { index: 'proschedule', title: '生产排产', icon: Folder },
      { index: 'feedback', title: '生产报工', icon: Folder }
    ]
  },
  {
    index: 'equipment',
    title: '设备管理',
    icon: Folder,
    children: [
      { index: 'equipment-type', title: '设备类型设置', icon: Folder },
      { index: 'equipment-ledger', title: '设备台帐', icon: Folder },
      { index: 'maintenance-check-items', title: '点检保养项目', icon: Folder },
      { index: 'maintenance-check-plan', title: '点检保养计划', icon: Folder },
      { index: 'check-records', title: '点检记录', icon: Folder },
      { index: 'maintenance-records', title: '保养记录', icon: Folder },
      { index: 'repair-order', title: '维修单', icon: Folder }
    ]
  },
  {
    index: 'jig-fixture',
    title: '工装夹具管理',
    icon: Folder,
    children: [
      { index: 'jig-fixture-type', title: '类型设置', icon: Folder },
      { index: 'jig-fixture-ledger', title: '工装夹具台帐', icon: Folder }
    ]
  },
  {
    index: 'qc',
    title: '质量管理',
    icon: Folder,
    children: [
      { index: 'qc-common-defect', title: '常见缺陷', icon: Folder },
      { index: 'qc-wait-task', title: '待检任务', icon: Folder }
    ]
  }
])

// Toggle sidebar
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// Handle tab click
const handleTabClick = (tag) => {
  console.log(tag.props.name);
  router.push(tag.props.name)
}
// Handle menu selection
const handleMenuSelect = (index) => {
  activeMenu.value = index
  activeTab.value = index

  // Check if tab already exists
  const existingTab = openedTabs.value.find(tab => tab.name === index)
  if (!existingTab) {
    // 查找菜单项，包括子菜单项
    let menuItem = null;
    for (const item of menuItems) {
      if (item.index === index) {
        menuItem = item;
        break;
      }
      if (item.children) {
        const child = item.children.find(child => child.index === index);
        if (child) {
          menuItem = child;
          break;
        }
      }
    }
    openedTabs.value.push({
      name: index,
      title: menuItem.title,
      component: 'div' // Placeholder component
    })
  }
}

// Remove tab
const removeTab = (targetName) => {
  const tabs = openedTabs.value
  let activeName = activeTab.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  activeTab.value = activeName
  activeMenu.value = activeName
  openedTabs.value = tabs.filter(tab => tab.name !== targetName)
  router.go(-1);
}

// Watch active tab to sync with menu
watch(activeTab, (newVal) => {
  activeMenu.value = newVal
})
</script>

<style scoped>
.home-layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #f5f5f5;
  border-right: 1px solid #e6e6e6;
  transition: width 0.3s;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e6e6e6;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tabs-container {
  flex: 1;
  overflow: hidden;
}

.tab-content {
  padding: 20px;
  height: calc(100vh - 100px);
  overflow-y: auto;
}
</style>